<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!--  作业一：整理emmet语法
    (语法规则+对应例子)
    1.id
    div#woshiid

    2.类名
    .czh
    span.demo
    div.czh

    3.属性
    []
    a[href="http://www.baidu.com" name="baidu"]

    4.子节点、兄弟、父
    子节点:>
    兄弟节点:+
    父节点:^
    div.father+p.uncle+ul.anut
    div>ul>li^div

    5.重复
    *数字就可以实现重复

    6.分组
    用()进行分组
    div>(ul>li>a)+div>p
    7.编号以及从第几个开始编号
    ul>li.test${$}*5

    8.内容
    {}
    ul>li{嘎嘎鸭}*3

    作业二：emmet语法生成结构 
    div.header{头部区域}^p.title{标题区域}^div.content{内容区域}^div.swiper{轮播图}^ul.ads{广告列表}>li.ad_item${这个是$个广告}*4^ul.goods{商品列表}>li.good$@1*8{这个是第$个商品}^ul.goods{商品列表}>li.good$@1*8{这个是第$个商品}^div.footer{底部区域}
    -->


    <div class="header">头部区域</div>
    <p class="title">标题区域</p>
    <div class="content">内容区域</div>
    <div class="swiper">轮播图</div>
    <ul class="ads">广告列表
        <li class="ad_item1">这个是1个广告</li>
        <li class="ad_item2">这个是2个广告</li>
        <li class="ad_item3">这个是3个广告</li>
        <li class="ad_item4">这个是4个广告</li>
    </ul>
    <ul class="goods">商品列表
        <li class="good1">这个是第1个商品</li>
        <li class="good2">这个是第2个商品</li>
        <li class="good3">这个是第3个商品</li>
        <li class="good4">这个是第4个商品</li>
        <li class="good5">这个是第5个商品</li>
        <li class="good6">这个是第6个商品</li>
        <li class="good7">这个是第7个商品</li>
        <li class="good8">这个是第8个商品</li>
    </ul>
    <ul class="goods">商品列表
        <li class="good1">这个是第1个商品</li>
        <li class="good2">这个是第2个商品</li>
        <li class="good3">这个是第3个商品</li>
        <li class="good4">这个是第4个商品</li>
        <li class="good5">这个是第5个商品</li>
        <li class="good6">这个是第6个商品</li>
        <li class="good7">这个是第7个商品</li>
        <li class="good8">这个是第8个商品</li>
    </ul>
    <div class="footer">底部区域</div>
</body>

</html>